<template>
    <div class="card-bord gua"
         @mousemove="handleMouseMove"
         @mouseenter="handleMouseEnter"
         @mouseleave="handleMouseLeave"
         ref="card">
      <div class="card-bord-view" :style="cardStyle">
        <div class="card-info">
          <slot name="header"></slot>
          <slot name="content">
            
          </slot>
        </div>
        <div class="card-bg" :style="[cardBgTransform]"></div>
        
      </div>
    </div>
  </template>
    <script>
    import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 
    export default {
      props: {
        data: Object
      },
      setup(props) {
        const card = ref(null);
        const width = ref(0);
        const height = ref(0);
        const mouseX = ref(0);
        const mouseY = ref(0);
        const mouseLeaveDelay = ref(null);
    
        const mousePX = computed(() => mouseX.value / width.value);
        const mousePY = computed(() => mouseY.value / height.value);
    
        const cardStyle = computed(() => {
          const rX = mousePX.value * 30;
          const rY = mousePY.value * -30;
          return {
            transform: `rotateY(${rX}deg) rotateX(${rY}deg)`
          };
        });
    
        const cardBgTransform = computed(() => {
          const tX = mousePX.value * -40;
          const tY = mousePY.value * -40;
          return {
            transform: `translateX(${tX}px) translateY(${tY}px)`
          };
        });
    
        const cardBgImage = computed(() => ({
          backgroundImage: `url(${props.dataImage})`
        }));
    
        const handleMouseMove = (e) => {
          mouseX.value = e.pageX - card.value.offsetLeft - width.value / 2;
          mouseY.value = e.pageY - card.value.offsetTop - height.value / 2;
        };
    
        const handleMouseEnter = () => {
          clearTimeout(mouseLeaveDelay.value);
        };
    
        const handleMouseLeave = () => {
          mouseLeaveDelay.value = setTimeout(() => {
            mouseX.value = 0;
            mouseY.value = 0;
          }, 300);
        };
    
        onMounted(() => {
          width.value = card.value.offsetWidth;
          height.value = card.value.offsetHeight;
        });
    
        onBeforeUnmount(() => {
          clearTimeout(mouseLeaveDelay.value);
        });
    
        return {
          card,
          cardStyle,
          cardBgTransform,
          cardBgImage,
          handleMouseMove,
          handleMouseEnter,
          handleMouseLeave
        };
      }
    };
    </script>
    <style lang="scss">
    .gua{
        display: flex;
        justify-content: space-around;
        .card-bord-view{
            width: 480px;
            height: 640px;
            border: 1px solid #fff;
            border-radius: 12px;
        }
        .code-info{
            width: 100%;
            padding: 40px;
            position: absolute;
            /* bottom: 0; */ 
            color: #fff;
            transform: translateY(40%);
            transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        .card-info{
            position: relative;
            box-sizing: border-box;
            transform: translateY(0%);
        }
        .card-title{
            font-size: 24px;
            padding-left: -24px;
        }
        .options{
             font-size:16px;
            padding-left:8px;
            &>div{
              padding-left:24px;
            }
        }
    }   
        
    </style>